<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <customermedia-search @search="reload"  />
      <el-card shadow="never">
        <!-- 数据表格 -->
        <ele-pro-table ref="table" row-key="id" :columns="columns" :datasource="datasource" :default-expand-all="false" :need-page="true" @done="onDone">
    
          <!-- 图片列 -->
          <template v-slot:mediaUrl="{ row }">
            <img :src="row.mediaUrl" min-width="80" height="80"/>
          </template>
     
          <!-- 标题列 -->
          <template slot="title" slot-scope="{ row }">
            <i :class="row.icon"></i> {{ row.name }}
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link v-show="row.status != 5" type="primary" :underline="false" icon="el-icon-view"  @click="openEdit(row,'3')">详情</el-link>
            
            <el-popconfirm class="ele-action"  title="确定要删除吗？" @confirm="remove(row)" >
              <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete" >作废</el-link>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <customermedia-detail :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex" />

    </div>
  </template>
  
  <script>
    import CustomermediaDetail from './components/customermedia-detail.vue'
    import CustomermediaSearch from './components/customermedia-search.vue';
    import { QueryMediaByCondition,DeleteMedia} from '@/api/customermanager/customermedia';
    export default {
      name: 'Customermedia',
      components: { CustomermediaDetail,CustomermediaSearch },
      data() {
        return {
          // 表格列配置
          columns: [
            { columnKey: 'index', type: 'index', width: 55, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号', },
            { prop: 'mediaUrl', label: '媒体图', showOverflowTooltip: true, slot: 'mediaUrl'},
            { prop: 'title', label: '标题',  showOverflowTooltip: true,},
            { prop: 'abstracts', label: '摘要',  showOverflowTooltip: true,},
            { prop: 'customerName', label: '发布人', showOverflowTooltip: true, align: 'center',   width: 100},
            { prop: 'createDate', label: '发布时间', showOverflowTooltip: true, align: 'center', sortable: 'createDate',width: 200,
              formatter: (row, column, cellValue) => {
                return this.$util.toDateString(cellValue,'YYYY-MM-DD HH:mm:ss');
              }
            },
            { prop: 'statusDesc', label: '状态', showOverflowTooltip: true, width: 80, align: 'center', },
            { columnKey: 'action', label: '操作', width: 220, align: 'center', resizable: false, slot: 'action', hideInSetting: true, showOverflowTooltip: true }
          ],
          // 当前编辑数据
          current: null,
          //操作按钮索引
          btnindex: '1',
          // 是否显示编辑弹窗
          showEdit: false
         
        };
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
  
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }
          
          let data = await QueryMediaByCondition(params.where);
  
          return {
            list:data.items,
            count:data.totalrecords,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
           // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
           if(this.current) {
            Object.assign(this.current, data);
          }
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
         */
        openEdit(row,index) {
          this.current = null;
          this.current = row;
          this.showEdit = true;
          this.btnindex = index;
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          DeleteMedia(row.id)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        }
        
        
      }
    };
  </script>
  